<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<h1 class="mui-title">{{dataInfo.ApplyUserName}}的请假申请</h1>
		</header>
		<div id="detailLeave" class="mui-content otherContent">
			<div class="title_">
				<span class="radius">{{dataInfo.ApplyUserName}}</span>
				<div class="item-desc">
					<span>{{dataInfo.ApplyUserName}}的请假申请</span>
					<div>{{status == 0 ?dbr+'审批中': status == 2 ? '已撤销' : secondObj.Option == 0 ? '审批拒绝' : '审批同意'}}</div>
				</div>
				<span :class="['totalradius', {'totalPass':lastObj.NodeName=='结束'&& secondObj.Option==1},{'totalFail':lastObj.NodeName=='结束'&& secondObj.Option==0},{'totalCancel':status == 2}]"></span>
			</div>
			<ul class="list">
				<li><span>人员类别：</span>
					<p>{{dataInfo["人员类别"]}}</p>
				</li>
				<!--<li><span>所在部门：</span>
					<p>{{dataInfo.info["所在部门"]}}</p>
				</li>-->
				<li><span>请假类型：</span>
					<p>{{dataInfo["请假类别"]}}</p>
				</li>
				<li><span>是否有课：</span>
					<p>{{dataInfo["是否有课"]}}</p>
				</li>
				<li><span>请假开始时间：</span>
					<p>{{dataInfo["请假开始时间"]}}</p>
				</li>
				<li><span>请假结束时间：</span>
					<p>{{dataInfo["请假结束时间"]}}</p>
				</li>
				<li><span>请假天数：</span>
					<p>{{dataInfo["请假天数"]}}</p>
				</li>
				<li><span>请假内容：</span>
					<p style="width:72%;">{{dataInfo["请假原因"]}}</p>
				</li>
				<!--<li><span>销假时间：</span>
					<p style="width:72%;"></p>
				</li>-->
			</ul>
			<div class="department" v-if="lastObj.OptionContent != '流程结束' && state != 1&& state != 2">
				<span>审核意见：</span>
				<textarea name="" rows="" cols="" placeholder="请输入审核意见（选填）" v-model="textareaText"></textarea>
			</div>
			<div class="flow" v-if="status != 2" v-for="log in dataLog">
				<div class="flowLeft">
					<img :src="log.CompletedTime ? './static/img/det_1.png':'./static/img/det_2.png'" />
				</div>
				<div class="flowRight ">
					<div class="title">
						<span class="radius">{{(log.NodeName == '结束')?'完成':log.CreateUserName}}</span>
						<div class="mui-media-body item-desc">
							{{(log.NodeName == '结束')?'完成':log.CreateUserName}}
							<p class="mui-ellipsis">{{log.NodeName == '开始'?'发起申请':log.OptionContent?log.OptionContent:log.Status}}</p>
							<span class="showTime">{{log.CompletedTime}}</span>
						</div>
					</div>
				</div>
			</div>
			<!--还没人进行审批时发起人可以进行撤销跟重新提交动作-->
			<div class="bottom" v-if=" hasBack == 0 ">
				<div class="leftBtn" >
					<button @click="revoke">撤销</button>
				</div>
				<div class="rightBtn">
					<button @click="submitAgain">重新提交</button>
				</div>
			</div>
			<!--流程撤销后 及 流程被拒绝时发起人可以进行重新提交动作-->
			<div class="bottom" v-if="status == 2 || (state == 1 && lastObj.OptionContent == '流程结束' && secondObj.Option == 0)">
				<div class="submitAgain" @click="submitAgain">
					重新提交
				</div>
			</div>
			<!--流程正在进行时 审批人可以进行同意 拒绝操作-->
			<div class="bottom" v-if="state == 0">
				<div class="leftBtn">
					<button @click="refuse">拒绝</button>
				</div>
				<div class="rightBtn">
					<button @click="agree">同意</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import axios from 'axios'
	import {
		loadFromLocal
	} from '@/service/store';
	import {
		getFlowData
	} from '@/service/getData';
	export default {
		data() {
				return {
					myUser: loadFromLocal("myUser", "obj"),
					instanceId: "",
					bookmark: "",
					dataInfo: {},
					dataLog: [],
					state: null,
					status: null,
					hasBack: null,
					textareaText: "",
					dbr: "",
					lastObj: "",
					secondObj: ""
				}
			},
			created() {
				this.instanceId = this.$route.params.instanceId;
				this.bookmark = this.$route.params.bookmark;
				this.state = this.$route.params.state;
				this.status = this.$route.params.status;
				this.hasBack = this.$route.params.hasBack;
				getFlowData({
					InstanceID: this.instanceId
				}).then((res) => {
					this.dataInfo = res.data.info;
					this.dataLog = res.data.log;
					this.dbr = res.data.dbr;
					this.lastObj = res.data.log[res.data.log.length - 1];
					this.secondObj = res.data.log[res.data.log.length - 2];
				});
			},
			methods: {
				//同意
				agree() {
					let self = this;
//					console.log(this.myUser.userId)
					axios({
						url: window.host + '/Workflow/GeneralApply/Pass',
						method: 'post',
						data: {
							"userId": self.myUser.userId,
							//							"schoolId": this.myUser.schoolId,
							//							"WorkflowId": this.$route.params.workflowId,
							"FormData": JSON.stringify({
								//								"请假类别": this.leavetype,
								//								"请假开始时间": this.starttime,
								//								"请假结束时间": this.endtime,
								//								"是否有课": this.hasclass,
								//								"请假天数": this.leaveDays,
								//								"请假原因": this.leaveReason,
								//								"人员类别": this.type,
								"InstanceID": self.instanceId,
								"Bookmark": self.bookmark,
								"ApplyReason": self.textareaText
							})
						},
						transformRequest: [function(data) {
								// Do whatever you want to transform the data
								let ret = ''
								for(let it in data) {
									ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
								}
								return ret
							}]
							//						headers: {
							//							'Content-Type': 'application/x-www-form-urlencoded'
							//						}
					}).then(function(res) {
						self.$router.push({
							name: 'Office',
							params: {
								token: self.myUser.token,
								schoolId: self.myUser.schoolId,
								userId: self.myUser.userId
							}
						})
					})
				},
				//拒绝
				refuse() {
//					alert('拒绝')
					let self = this;
					console.log(this.myUser.userId)
					axios({
						url: window.host + '/Workflow/GeneralApply/NoPass',
						method: 'post',
						data: {
							"userId": self.myUser.userId,
							//							"schoolId": this.myUser.schoolId,
							//							"WorkflowId": this.$route.params.workflowId,
							"FormData": JSON.stringify({
								//								"请假类别": this.leavetype,
								//								"请假开始时间": this.starttime,
								//								"请假结束时间": this.endtime,
								//								"是否有课": this.hasclass,
								//								"请假天数": this.leaveDays,
								//								"请假原因": this.leaveReason,
								//								"人员类别": this.type,
								"InstanceID": self.instanceId,
								"Bookmark": self.bookmark,
								"ApplyReason": self.textareaText
							})
						},
						transformRequest: [function(data) {
								// Do whatever you want to transform the data
								let ret = ''
								for(let it in data) {
									ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
								}
								return ret
							}]
							//						headers: {
							//							'Content-Type': 'application/x-www-form-urlencoded'
							//						}
					}).then(function(res) {
						self.$router.push({
							name: 'Office',
							params: {
								token: self.myUser.token,
								schoolId: self.myUser.schoolId,
								userId: self.myUser.userId
							}
						})
					})
				},
				//撤销
				revoke() {
//					alert('撤销')
					let self = this;
//					console.log(this.myUser.userId)
					axios({
						url: window.host + '/Workflow/ApplyCenter/RevokeInstance',
						method: 'post',
						data: {
							"InstanceID": self.instanceId
						},
						transformRequest: [function(data) {
								// Do whatever you want to transform the data
								let ret = ''
								for(let it in data) {
									ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
								}
								return ret
							}]
							//						headers: {
							//							'Content-Type': 'application/x-www-form-urlencoded'
							//						}
					}).then(function(res) {
						self.$router.push({
							name: 'MyFlowList',
							params: {
								state: '1'
							}
						})
					})
				},
				//重新提交
				submitAgain(){
					let self = this;
					self.$router.push({
							name: 'Leave',
							params: {
								Id:'0e3a4079-c1fa-20cd-f9f9-39e1392a4dc0&'+self.instanceId
//								workflowId: '0e3a4079-c1fa-20cd-f9f9-39e1392a4dc0',
//								instanceId: 
							}
						})
				}
			}
	}
</script>
<style>

</style>